<template>
    <a-modal
        v-model:visible="visible"
        :title="title"
        :on-before-ok="handleBeforeOk"
        @cancel="handleCancel"
    >
        <template #title></template>
        <div>
            <a-form ref="formRef" :model="formData" :rules="formRules">
                <a-form-item field="deviceName" :label="$t('device.name')">
                    <a-input v-model="formData.deviceName"></a-input>
                </a-form-item>
                <a-form-item field="deviceNo" :label="$t('device.number')">
                    <a-input v-model="formData.deviceNo"></a-input>
                </a-form-item>
                <a-form-item
                    field="productId"
                    :label="$t('device.product.type')"
                >
                    <a-select
                        v-model="formData.productId"
                        @change="changeProduct"
                    >
                        <a-option
                            v-for="option in productList"
                            :key="option.id"
                            :label="option.productName"
                            :value="option.id"
                        ></a-option>
                    </a-select>
                </a-form-item>
                <a-form-item
                    field="productCategory"
                    :label="$t('product.type')"
                >
                    <a-select v-model="formData.productCategory" disabled>
                        <a-option
                            v-for="option in ProductCategoryOptions"
                            :key="option.value"
                            :label="option.label"
                            :value="option.value"
                        ></a-option>
                    </a-select>
                </a-form-item>
                <a-form-item field="productType" :label="$t('device.type')">
                    <a-select v-model="formData.productType" disabled>
                        <a-option
                            v-for="option in ProductTypeOptions"
                            :key="option.value"
                            :label="option.label"
                            :value="option.value"
                        ></a-option>
                    </a-select>
                </a-form-item>

                <a-form-item
                    field="deviceSecret"
                    :label="$t('device.key')"
                    :rules="
                        formData.productType === '1'
                            ? formRules.deviceSecret
                            : {}
                    "
                >
                    <a-input v-model="formData.deviceSecret"></a-input>
                </a-form-item>

                <a-form-item field="stationId" :label="$t('suo-shu-zhan-dian')">
                    <a-select v-model="formData.stationId">
                        <a-option
                            v-for="option in stationList"
                            :key="option.id"
                            :label="option.stationName"
                            :value="option.stationId"
                        ></a-option>
                    </a-select>
                </a-form-item>
                <a-form-item field="sort" :label="$t('pai-xu')">
                    <a-input-number
                        v-model="formData.sort"
                        :precision="0"
                        :min="0"
                        model-event="input"
                    />
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
</template>

<script lang="ts" setup>
    import { ref, reactive, PropType } from 'vue';
    import { useI18n } from 'vue-i18n';
    import { addDevice, editDevice, getStationList } from '../service';
    import { getProductList } from '../../product/service';
    import {
        ProductCategoryOptions,
        ProductTypeOptions,
    } from '../../product/const';

    const { t } = useI18n();
    const props = defineProps({
        title: {
            type: String,
            default: undefined,
        },
        type: {
            type: String as PropType<'ADD' | 'EDIT'>,
            default: 'ADD',
        },
    });

    const emit = defineEmits(['submit']);

    const visible = ref(false);
    const formRef = ref();
    const formData = reactive({
        deviceNo: '',
        deviceName: '',
        deviceSecret: '',
        productId: undefined,
        productType: undefined,
        productCategory: undefined,
        stationId: undefined,
        sort: 0,
    });
    const formRules = {
        deviceNo: [
            {
                required: true,
                message: t('input.placeholder') + t('device.number'),
            },
        ],
        deviceName: [
            {
                required: true,
                message: t('input.placeholder') + t('device.name'),
            },
        ],
        deviceSecret: [
            {
                required: true,
                message: t('qing-shu-ru-she-bei-mi-yue'),
            },
        ],
        productId: [
            {
                required: true,
                message: t('select.placeholder') + t('device.product.type'),
            },
        ],
        stationId: [
            {
                required: true,
                message: t('tinputplaceholder-zhan-dian-id', [
                    t('input.placeholder'),
                ]),
            },
        ],
        sort: [
            {
                required: true,
                message: t('tinputplaceholder-pai-xu', [
                    t('input.placeholder'),
                ]),
            },
        ],
    };
    const productList = ref<any[]>([]);
    const stationList = ref<any[]>([]);

    function open(data: any) {
        Object.assign(formData, data);
        visible.value = true;
    }

    const handleBeforeOk = async () => {
        const res = await formRef.value.validate();
        if (!res) {
            if (props.type === 'ADD') {
                await addDevice(formData);
            } else {
                await editDevice(formData);
            }
            emit('submit');
            formRef.value.resetFields();
            return true;
        }
        return false;
    };

    function changeProduct(value: any) {
        const product = productList.value.find((item) => item.id === value);
        if (product) {
            formData.productType = product.productType;
            formData.productCategory = `${product.productCategory}`;
        }
    }

    async function loadProductList() {
        const data = await getProductList({ current: 1, size: 999 });
        productList.value = data.result.records;
    }
    loadProductList();

    async function loadStationList() {
        const data = await getStationList({ current: 1, size: 999 });
        stationList.value = data.result.records;
    }
    loadStationList();

    function handleCancel() {
        formRef.value.resetFields();
        visible.value = false;
    }

    defineExpose({
        open,
    });
</script>
